{% extends 'pages/_base.html' %}
{% block _base %}

<img id="img_background" src="{{ data.Personal[0].img_background }}" alt="" style="width: 100%; height: 50vh; object-fit: cover; object-position: center; border: 3px solid #000; border-radius: 8px;" />

<div class="d-flex align-items-center mt-4">
    <img id="img_icon" src="{{ data.Personal[0].img_icon }}" alt=""
        style="width: 20vh; height: 20vh; object-fit: cover; object-position: center;
               border: 3px solid #000; border-radius: 50%;" />

    <div class="d-flex flex-column ml-3">
        <span class="badge badge-primary p-2 mb-2" id="username">{{ data.session.username }}</span>

        {% if data.Role[0].role %}
        <span class="badge badge-secondary p-2 mb-2" id="role-badge">{{ data.Role[0].role }}</span>
        {% else %}
        <span class="badge badge-secondary p-2 mb-2" id="role-badge">选择身份</span>
        {% endif %}

        {% if data.Role[0].part %}
        <span class="badge badge-secondary p-2 mb-2" id="part-badge">{{ data.Role[0].part }}</span>
        {% else %}
        <span class="badge badge-secondary p-2 mb-2" id="part-badge">选择部门</span>
        {% endif %}
    </div>

</div>



<div class="alert mt-4" role="alert" id="intro" style="word-wrap: break-word; max-width: 100%;">
    {{ data.Personal[0].intro }}
</div>

<script>
    EventLoad(async () => {

        let colors = [
            {bg: "#f8d7da", text: "#721c24"},
            {bg: "#d4edda", text: "#155724"},
            {bg: "#cce5ff", text: "#004085"},
            {bg: "#fff3cd", text: "#856404"},
            {bg: "#d1c4e9", text: "#4a148c"}
        ];

        let intro = getElementById('intro')
        let randomColor = colors[Math.floor(Math.random() * colors.length)];
        intro.style.backgroundColor = randomColor.bg;
        intro.style.color = randomColor.text;

        let img_background = getElementById('img_background')
        let img_icon = getElementById('img_icon')
        let roleBadge = getElementById('role-badge')
        let partBadge = getElementById('part-badge')


        {% if data.writeable %}
            await ImageUpload(img_background, async (file) => {
                let base64 = await toBase64(file);
                let data_ = {'img_background': base64};
                let res = await fetchPost('{{ url_for('personal.post_my_model_of_personal_img_background') }}', data_);
                flash(res.msg);
            });

            await ImageUpload(img_icon, async (file) => {
                let base64 = await toBase64(file);
                let data_ = {'img_icon': base64};
                let res = await fetchPost('{{ url_for('personal.post_my_model_of_personal_img_icon') }}', data_);
                flash(res.msg);
            });

            await TextUpload(intro, async (text) => {
                let data_ = {'intro': text}
                let res = await fetchPost('{{ url_for('personal.post_my_model_of_personal_intro') }}', data_);
                flash(res.msg);
            })

        function createSelect(options, currentValue, callback) {
                const select = document.createElement('select');
                select.className = 'form-control';

                options.forEach(option => {
                    const opt = document.createElement('option');
                    opt.value = option;
                    opt.textContent = option;
                    if (option === currentValue) opt.selected = true;
                    select.appendChild(opt);
                });

                select.addEventListener('change', () => {
                    callback(select.value);
                });

                return select;
            }

Event(roleBadge, 'click', () => {
                    const roleOptions = ['学生', '教师', '管理员', '访客'];
                    const currentRole = roleBadge.textContent.trim();

                    // 替换为选择框
                    const select = createSelect(roleOptions, currentRole, async (selectedRole) => {
                        roleBadge.textContent = selectedRole;
                        const data = {'role': selectedRole};
                        const res = await fetchPost('{{ url_for("role.post_my_model_of_role_role") }}', data);
                        flash(res.msg);
                        roleBadge.style.display = 'inline-block';
                        select.remove();
                    });

                    roleBadge.style.display = 'none';
                    roleBadge.after(select);
                    select.focus();
                });

                Event(partBadge, 'click', () => {
                    const partOptions = ['通信工程', '金融工程', '计算机科学', '电子工程', '机械工程', '工商管理'];
                    const currentPart = partBadge.textContent.trim();

                    // 替换为选择框
                    const select = createSelect(partOptions, currentPart, async (selectedPart) => {
                        partBadge.textContent = selectedPart;
                        const data = {'part': selectedPart};
                        const res = await fetchPost('{{ url_for("role.post_my_model_of_role_part") }}', data);
                        flash(res.msg);
                        partBadge.style.display = 'inline-block';
                        select.remove();
                    });

                    partBadge.style.display = 'none';
                    partBadge.after(select);
                                        select.focus();

                });
        {% endif %}

    })
</script>
{% endblock %}
